<!DOCTYPE html>
<html>
<head>
	<title>退换货</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<!-- 所有的 css -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css">
	<link rel="stylesheet" href="../../static/css/admin.css">
	<style>
		.return-container {
			padding: 20px;
			max-width: 1200px;
			margin: 0 auto;
		}
		.return-card {
			margin-bottom: 20px;
			padding: 20px;
			background: #fff;
			border-radius: 8px;
			box-shadow: 0 2px 4px rgba(0,0,0,0.1);
		}
		.return-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 15px;
			padding-bottom: 10px;
			border-bottom: 1px solid #eee;
		}
		.return-info {
			display: flex;
			align-items: center;
			gap: 15px;
			margin-bottom: 15px;
		}
		.product-image {
			width: 80px;
			height: 80px;
			object-fit: cover;
			border-radius: 4px;
		}
		.product-details {
			flex: 1;
		}
		.product-name {
			font-weight: bold;
			color: #333;
			margin-bottom: 5px;
		}
		.product-spec {
			color: #666;
			font-size: 14px;
		}
		.return-reason {
			background: #f5f7fa;
			padding: 10px;
			border-radius: 4px;
			margin-bottom: 15px;
		}
		.return-actions {
			display: flex;
			gap: 10px;
			justify-content: flex-end;
		}
		.apply-form {
			max-width: 600px;
			margin: 0 auto;
			padding: 20px;
			background: #fff;
			border-radius: 8px;
			box-shadow: 0 2px 4px rgba(0,0,0,0.1);
		}
	</style>
</head>
<body>
	<div id="app" class="return-container">
		<h2>退换货管理</h2>
		
		<el-tabs v-model="activeTab" @tab-click="handleTabClick">
			<el-tab-pane label="申请记录" name="records"></el-tab-pane>
			<el-tab-pane label="申请退换货" name="apply"></el-tab-pane>
		</el-tabs>

		<!-- 申请记录 -->
		<div v-if="activeTab === 'records'">
			<div class="return-card" v-for="record in returnRecords" :key="record.id">
				<div class="return-header">
					<div>
						<span>申请单号：{{ record.applyNo }}</span>
						<span style="margin-left: 20px;">申请时间：{{ record.applyTime }}</span>
					</div>
					<el-tag :type="getStatusType(record.status)">{{ record.statusText }}</el-tag>
				</div>
				
				<div class="return-info">
					<img :src="record.productImage" :alt="record.productName" class="product-image">
					<div class="product-details">
						<div class="product-name">{{ record.productName }}</div>
						<div class="product-spec">规格：{{ record.productSpec }}</div>
						<div class="product-spec">数量：{{ record.quantity }}</div>
						<div class="product-spec">类型：{{ record.type === 'return' ? '退货' : '换货' }}</div>
					</div>
					<div style="text-align: right;">
						<div style="font-size: 16px; color: #e6a23c; font-weight: bold;">￥{{ record.amount }}</div>
					</div>
				</div>
				
				<div class="return-reason">
					<strong>申请原因：</strong>{{ record.reason }}
				</div>
				
				<div class="return-actions">
					<el-button size="small" @click="viewDetail(record)">查看详情</el-button>
					<el-button v-if="record.status === 'pending'" size="small" @click="cancelApply(record)">撤销申请</el-button>
					<el-button v-if="record.status === 'approved'" type="primary" size="small" @click="sendGoods(record)">寄送商品</el-button>
				</div>
			</div>

			<div v-if="returnRecords.length === 0" style="text-align: center; padding: 50px;">
				<el-empty description="暂无退换货记录"></el-empty>
			</div>
		</div>

		<!-- 申请退换货 -->
		<div v-if="activeTab === 'apply'" class="apply-form">
			<h3>申请退换货</h3>
			<el-form :model="applyForm" :rules="applyRules" ref="applyForm" label-width="100px">
				<el-form-item label="订单号" prop="orderNo">
					<el-input v-model="applyForm.orderNo" placeholder="请输入订单号"></el-input>
				</el-form-item>
				
				<el-form-item label="申请类型" prop="type">
					<el-radio-group v-model="applyForm.type">
						<el-radio label="return">退货</el-radio>
						<el-radio label="exchange">换货</el-radio>
					</el-radio-group>
				</el-form-item>
				
				<el-form-item label="退换原因" prop="reason">
					<el-select v-model="applyForm.reason" placeholder="请选择退换原因" style="width: 100%;">
						<el-option label="商品质量问题" value="quality"></el-option>
						<el-option label="商品与描述不符" value="description"></el-option>
						<el-option label="收到商品破损" value="damaged"></el-option>
						<el-option label="不喜欢/不合适" value="dislike"></el-option>
						<el-option label="其他原因" value="other"></el-option>
					</el-select>
				</el-form-item>
				
				<el-form-item label="详细说明" prop="description">
					<el-input type="textarea" v-model="applyForm.description" :rows="4" placeholder="请详细描述问题"></el-input>
				</el-form-item>
				
				<el-form-item label="上传图片">
					<el-upload
						class="upload-demo"
						action="#"
						:on-preview="handlePreview"
						:on-remove="handleRemove"
						:file-list="applyForm.fileList"
						:auto-upload="false"
						list-type="picture">
						<el-button size="small" type="primary">点击上传</el-button>
						<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2MB</div>
					</el-upload>
				</el-form-item>
				
				<el-form-item label="联系电话" prop="phone">
					<el-input v-model="applyForm.phone" placeholder="请输入联系电话"></el-input>
				</el-form-item>
				
				<el-form-item>
					<el-button type="primary" @click="submitApply">提交申请</el-button>
					<el-button @click="resetForm">重置</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>

	<!-- 所有的 js -->
	<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
	<script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script>
	<script>
		new Vue({
			el: '#app',
			data: {
				activeTab: 'records',
				returnRecords: [
					{
						id: 1,
						applyNo: 'RT20240119001',
						productName: '有机西红柿',
						productSpec: '500g/盒',
						productImage: 'https://via.placeholder.com/80x80/ff6b6b/ffffff?text=西红柿',
						quantity: 1,
						amount: 18.40,
						type: 'return',
						reason: '商品质量问题，收到的西红柿有腐烂现象',
						status: 'pending',
						statusText: '审核中',
						applyTime: '2024-01-19 10:30:00'
					},
					{
						id: 2,
						applyNo: 'EX20240118001',
						productName: '新鲜黄瓜',
						productSpec: '1kg/袋',
						productImage: 'https://via.placeholder.com/80x80/4ecdc4/ffffff?text=黄瓜',
						quantity: 1,
						amount: 15.60,
						type: 'exchange',
						reason: '商品与描述不符，黄瓜不够新鲜',
						status: 'approved',
						statusText: '已通过',
						applyTime: '2024-01-18 15:20:00'
					},
					{
						id: 3,
						applyNo: 'RT20240117001',
						productName: '有机胡萝卜',
						productSpec: '800g/袋',
						productImage: 'https://via.placeholder.com/80x80/ff9f43/ffffff?text=胡萝卜',
						quantity: 1,
						amount: 14.30,
						type: 'return',
						reason: '收到商品破损',
						status: 'completed',
						statusText: '已完成',
						applyTime: '2024-01-17 09:15:00'
					}
				],
				applyForm: {
					orderNo: '',
					type: 'return',
					reason: '',
					description: '',
					phone: '',
					fileList: []
				},
				applyRules: {
					orderNo: [
						{ required: true, message: '请输入订单号', trigger: 'blur' }
					],
					type: [
						{ required: true, message: '请选择申请类型', trigger: 'change' }
					],
					reason: [
						{ required: true, message: '请选择退换原因', trigger: 'change' }
					],
					description: [
						{ required: true, message: '请输入详细说明', trigger: 'blur' }
					],
					phone: [
						{ required: true, message: '请输入联系电话', trigger: 'blur' },
						{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
					]
				}
			},
			methods: {
				handleTabClick(tab) {
					console.log('切换到标签页：', tab.name);
				},
				getStatusType(status) {
					const statusMap = {
						pending: 'warning',
						approved: 'success',
						rejected: 'danger',
						completed: 'info'
					};
					return statusMap[status] || 'info';
				},
				viewDetail(record) {
					this.$message.info('查看申请详情：' + record.applyNo);
				},
				cancelApply(record) {
					this.$confirm('确认撤销申请 ' + record.applyNo + '？', '撤销申请', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						// 从记录中移除
						const index = this.returnRecords.findIndex(r => r.id === record.id);
						if (index > -1) {
							this.returnRecords.splice(index, 1);
						}
						this.$message.success('申请已撤销');
					}).catch(() => {
						this.$message.info('已取消');
					});
				},
				sendGoods(record) {
					this.$message.info('请按照客服提供的地址寄送商品');
				},
				handlePreview(file) {
					console.log('预览文件：', file);
				},
				handleRemove(file, fileList) {
					this.applyForm.fileList = fileList;
				},
				submitApply() {
					this.$refs.applyForm.validate((valid) => {
						if (valid) {
							// 模拟提交
							this.$message.success('申请提交成功，请等待审核');
							// 添加到记录列表
							const newRecord = {
								id: Date.now(),
								applyNo: 'RT' + new Date().toISOString().slice(0,10).replace(/-/g,'') + '001',
								productName: '商品名称',
								productSpec: '规格',
								productImage: 'https://via.placeholder.com/80x80/999/ffffff?text=商品',
								quantity: 1,
								amount: 0,
								type: this.applyForm.type,
								reason: this.applyForm.description,
								status: 'pending',
								statusText: '审核中',
								applyTime: new Date().toLocaleString()
							};
							this.returnRecords.unshift(newRecord);
							this.resetForm();
							this.activeTab = 'records';
						} else {
							return false;
						}
					});
				},
				resetForm() {
					this.$refs.applyForm.resetFields();
					this.applyForm.fileList = [];
				}
			}
		});
	</script>
</body>
</html>